<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="css/common.css"/>

</head>
<body>
<header class="banner">
    <img src="images/banner.jpg" alt="" width="100%" height="729">
</header>


<script type="text/html" id="gallery_list_model">

    <div class="gallery_list_dan">
        <div >
            {{each data.content e i}}
            <div class="img_mask">
                <img src="{{connect + e.hdtv_url}}" alt="" class="pimg"/>
                <div class="img_info">
                    <p>尺寸：{{e.size}}</p>
                    <p>作者：{{e.author}}</p>
                </div>
            </div>
            {{/each}}
        </div>

    </div>

</script>

<script type="text/html" id="gallery_list_model2">

    <div class="gallery_list_shuang">
        <div >
            {{each data.content e i}}
            <div class="img_mask">
                <img src="{{connect + e.hdtv_url}}" alt="" class="pimg" />
                <div class="img_info">
                    <p>尺寸：{{e.size}}</p>
                    <p>作者：{{e.author}}</p>
                </div>
            </div>
            {{/each}}
        </div>

    </div>


</script>

<section class="index_container">
    <div class="w">
        <div class="logo">
            <a href="index.html" style="display: inline-block;">
                <img src="images/logo.png" alt=""/>
            </a>

        </div>
        <div class="nav">
            <a href="index.html">Houses</a>
            <a href="artist.html"  >Artists</a>
            <a href="gallery.html" class="active">Gallery</a>
            <a href="sculpture.html">Sculpture</a>
            <a href="studio.html">Studio</a>
            <a href="events.html">Events</a>
            <a href="contact.html">Contact</a>
        </div>

        <div class="gallery" id="gallery_list">

            <!--<div class="gallery_list_dan">-->
                <!--<div >-->
                    <!--<div class="img_mask">-->
                        <!--<img src="images/index.png" alt="" class="pimg"/>-->
                        <!--<div class="img_info">-->
                            <!--<p>尺寸：300*500</p>-->
                            <!--<p>作者：Jack Smith</p>-->
                        <!--</div>-->
                    <!--</div>-->
                    <!--<div class="img_mask">-->
                        <!--<img src="images/Gallery_03.jpg" alt="" class="pimg"/>-->
                        <!--<div class="img_info">-->
                            <!--<p>尺寸：300*500</p>-->
                            <!--<p>作者：Jack Smith</p>-->
                        <!--</div>-->
                    <!--</div>-->
                    <!--<div class="img_mask">-->
                        <!--<img src="images/index.png" alt="" class="pimg"/>-->
                        <!--<div class="img_info">-->
                            <!--<p>尺寸：300*500</p>-->
                            <!--<p>作者：Jack Smith</p>-->
                        <!--</div>-->
                    <!--</div>-->
                <!--</div>-->

            <!--</div>-->

            <!--<div class="gallery_list_shuang">-->

                    <!--<div >-->
                        <!--<div class="img_mask">-->
                            <!--<img src="images/index.png" alt="" class="pimg"/>-->
                            <!--<div class="img_info">-->
                                <!--<p>尺寸：300*500</p>-->
                                <!--<p>作者：Jack Smith</p>-->
                            <!--</div>-->
                        <!--</div>-->
                        <!--<div class="img_mask">-->
                            <!--<img src="images/Gallery_03.jpg" alt="" class="pimg"/>-->
                            <!--<div class="img_info">-->
                                <!--<p>尺寸：300*500</p>-->
                                <!--<p>作者：Jack Smith</p>-->
                            <!--</div>-->
                        <!--</div>-->
                        <!--<div class="img_mask">-->
                            <!--<img src="images/index.png" alt="" class="pimg"/>-->
                            <!--<div class="img_info">-->
                                <!--<p>尺寸：300*500</p>-->
                                <!--<p>作者：Jack Smith</p>-->
                            <!--</div>-->
                        <!--</div>-->
                    <!--</div>-->
                <!--</div>-->

            <!--<div class="gallery_list_dan">-->
                <!--<div >-->
                    <!--<div class="img_mask">-->
                        <!--<img src="images/index.png" alt="" class="pimg"/>-->
                        <!--<div class="img_info">-->
                            <!--<p>尺寸：300*500</p>-->
                            <!--<p>作者：Jack Smith</p>-->
                        <!--</div>-->
                    <!--</div>-->
                    <!--<div class="img_mask">-->
                        <!--<img src="images/Gallery_03.jpg" alt="" class="pimg"/>-->
                        <!--<div class="img_info">-->
                            <!--<p>尺寸：300*500</p>-->
                            <!--<p>作者：Jack Smith</p>-->
                        <!--</div>-->
                    <!--</div>-->
                    <!--<div class="img_mask">-->
                        <!--<img src="images/index.png" alt="" class="pimg"/>-->
                        <!--<div class="img_info">-->
                            <!--<p>尺寸：300*500</p>-->
                            <!--<p>作者：Jack Smith</p>-->
                        <!--</div>-->
                    <!--</div>-->
                <!--</div>-->

            <!--</div>-->

            </div>

        </div>
</section>
<footer class="index_footer">
    <div class="foot_img">
        <div>
            <ul>
                <li>隐私政策</li>
                <li>服务条款</li>
                <li>联系我们</li>
            </ul>
            <div class="mg-t-10 mg-b-5">湖南融聚优创科技有限公司 &nbsp;&nbsp;&nbsp;客服热线：400-123-123</div>
            <div>Copyright 2018-2019 feigu.cn ALL rights reserved.湘|CP备16012585号-1</div>
        </div>



    </div>
</footer>


<div id="outerdiv" style="position:fixed;top:0;left:0;background:rgba(0,0,0,0.7);z-index:2;width:100%;height:100%;display:none;">
    <div id="innerdiv" style="position:absolute;">
        <img id="bigimg" style="border:5px solid #fff;" src="" />
    </div>
</div>

<script src="js/jquery-2.1.4.js"></script>
<script src="js/template-web.js"></script>
<script src="js/common.js"></script>
<script src="js/gallery.js"></script>

<script>
    $(function(){

        $('#gallery_list').on('click','.pimg',function(){
            var _this = $(this);//将当前的pimg元素作为_this传入函数
            imgShow("#outerdiv", "#innerdiv", "#bigimg", _this);
        })


    });

    function imgShow(outerdiv, innerdiv, bigimg, _this){
        var src = _this.attr("src");//获取当前点击的pimg元素中的src属性
        $(bigimg).attr("src", src);//设置#bigimg元素的src属性

        /*获取当前点击图片的真实大小，并显示弹出层及大图*/
        $("<img/>").attr("src", src).load(function(){
            var windowW = $(window).width();//获取当前窗口宽度
            var windowH = $(window).height();//获取当前窗口高度
            var realWidth = this.width;//获取图片真实宽度
            var realHeight = this.height;//获取图片真实高度
            var imgWidth, imgHeight;
            var scale = 0.8;//缩放尺寸，当图片真实宽度和高度大于窗口宽度和高度时进行缩放

            if(realHeight>windowH*scale) {//判断图片高度
                imgHeight = windowH*scale;//如大于窗口高度，图片高度进行缩放
                imgWidth = imgHeight/realHeight*realWidth;//等比例缩放宽度
                if(imgWidth>windowW*scale) {//如宽度扔大于窗口宽度
                    imgWidth = windowW*scale;//再对宽度进行缩放
                }
            } else if(realWidth>windowW*scale) {//如图片高度合适，判断图片宽度
                imgWidth = windowW*scale;//如大于窗口宽度，图片宽度进行缩放
                imgHeight = imgWidth/realWidth*realHeight;//等比例缩放高度
            } else {//如果图片真实高度和宽度都符合要求，高宽不变
                imgWidth = realWidth;
                imgHeight = realHeight;
            }
            $(bigimg).css("width",imgWidth);//以最终的宽度对图片缩放

            var w = (windowW-imgWidth)/2;//计算图片与窗口左边距
            var h = (windowH-imgHeight)/2;//计算图片与窗口上边距
            $(innerdiv).css({"top":h, "left":w});//设置#innerdiv的top和left属性
            $(outerdiv).fadeIn("fast");//淡入显示#outerdiv及.pimg
        });

        $(outerdiv).click(function(){//再次点击淡出消失弹出层
            $(this).fadeOut("fast");
        });
    }
</script>

</body>
</html>